<template>
  <div class="box">
    <div class="list-children" v-for="item in list" :key="item.JobGroupTypeID">
      <!-- 列表一级 Start -->
      <div class="children-one-level">
        <span @click="switchItem(item)">
          <a-icon
            :type="item.check ? 'caret-up' : 'caret-down'"
            class="icon-class"
          />{{ item.JobGroupTypeName }}</span
        ><span></span>
        <span style="cursor: pointer">
          <a-dropdown :trigger="['click']">
            <img
              src="@/assets/img/Icon/展开.png"
              alt=""
              style="height: 1.25rem; width: 1.25rem"
            />
            <a-menu slot="overlay">
              <a-menu-item key="0">
                <transparent-button
                  size="small"
                  @operation="addWork(item)"
                  btnText="新增工作集"
                  btnPowerNum="02AC9BF3-B699-4886-B1EF-F4A3E79816C7"
                >
                </transparent-button>
              </a-menu-item>
              <a-menu-item key="1">
                <transparent-button
                  size="small"
                  @operation="editWorkType(item)"
                  btnText="修改工作集类型"
                  btnPowerNum="02AC9BF3-B699-4886-B1EF-F4A3E79816C7"
                >
                </transparent-button>
              </a-menu-item>
              <a-menu-item key="2">
                <transparent-button
                  size="small"
                  @operation="editWorkType(item)"
                  btnText="删除工作集类型"
                  btnPowerNum="02AC9BF3-B699-4886-B1EF-F4A3E79816C7"
                >
                </transparent-button>
              </a-menu-item>
            </a-menu> </a-dropdown
        ></span>
      </div>
      <!-- 列表一级 End -->
      <!-- 列表展开项 Start -->
      <div v-if="item.check">
        <div
          v-for="itm in item.JobGroupList"
          :key="itm.JobGroupID"
          @click="pickDataFun(itm)"
          :class="[
            'children-two-level',
            'btn8',
            selectedData.JobGroupID == itm.JobGroupID
              ? 'children-two-level-active'
              : '',
          ]"
        >
          <span
            :class="['state-box', itm.VerifyStatus ? '' : 'error-state']"
          ></span>
          <span class="name"
            >{{ itm.JobGroupName }}({{ itm.JobGroupNo }} -
            {{ itm.JobTempletVisionOut }})</span
          >
          <div
            class="two-level-icon"
            v-if="selectedData.JobGroupID == itm.JobGroupID"
          >
            <span class="icon-class-box" @click="editWork(itm)"
              ><img src="@/assets/img/Icon/编辑-black.png" alt=""
            /></span>
            <!-- <span class="icon-class-box" @click="copyWork(itm)"
              ><img src="@/assets/img/Icon/复制.png" alt=""
            /></span> -->
            <span class="icon-class-box" @click="delWork(itm)"
              ><img src="@/assets/img/Icon/删除1.png" alt=""
            /></span>
          </div>
          <div class="btnbg1"></div>
          <div class="btnbg2"></div>
        </div>
      </div>
      <!-- 列表展开项 End -->
    </div>
  </div>
</template>
 
<script>
import TransparentButton from "@/components/transparent-btn.vue";
export default {
  components: {
    TransparentButton,
  },
  props: ["list", "currentInfo"],
  data() {
    return {
      selectedData: {
        JobGroupID: null,
      }, //查询载体
      flag: true,
    };
  },
  methods: {
    //切换
    switchItem(item) {
      item.check = !item.check;
      this.$emit("switchItemFun", item);
    },
    //选中工作集
    pickDataFun(item) {
      this.selectedData = item;
      this.$emit("presentData", item);
    },
    //新增工作集
    addWork(item) {
      this.$emit("addWorkFun", item);
    },
    //修改工作集类型
    editWorkType(item) {
      this.$emit("editWorkTypeFun", item);
    },
    //删除工作集类型
    delWorkType(item) {
      this.$emit("delWorkTypeFun", item);
    },
    //修改工作集
    editWork(item) {
      if (item.VerifyStatus)
        return this.$message.error("工作集已审核,请反审再操作修改");
      this.$emit("editWorkFun", item);
    },
    //复制工作集
    copyWork(item) {
      if (item.VerifyStatus)
        return this.$message.error("工作集已审核,请反审再操作复制");
      this.$emit("copyWorkFun", item);
    },
    //删除工作集
    delWork(item) {
      if (item.VerifyStatus)
        return this.$message.error("工作集已审核,请反审再操作删除");
      this.$emit("delWorkFun", item);
    },
  },
  watch: {
    currentInfo: {
      handler(newV, oldV) {
        if (newV && this.flag) {
          this.selectedData = newV;
        }
      },
      immediate: true, // 重点
      deep: true, // 重点
    },
  },
};
</script>
 
<style lang = "less" scoped>
.box {
  flex: 1;
  overflow: auto;

  .list-children {
    .children-one-level {
      display: flex;
      align-items: center;
      margin: 1.25rem 0 0.9375rem 0;

      :nth-child(2) {
        display: inline-block;
        font-weight: 700;
        margin: 0 0.625rem;
      }
    }

    .children-two-level {
      margin: 0.625rem 0;
      font-size: 0.8rem;
      padding: 0.3125rem 0.3125rem 0.3125rem 2.5rem;
      cursor: pointer;
      display: flex;
      align-items: baseline;

      .name {
        flex: 1;
      }

      .two-level-icon {
        display: flex;

        .icon-class-box {
          height: 0.875rem;
          width: 0.875rem;

          &:nth-child(2) {
            margin: 0 0.3125rem;
          }

          img {
            height: 100%;
            width: 100%;
          }
        }
      }
    }

    .children-two-level-active {
      background: #dcf0ef;
    }
  }
}

.state-box {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #4b8e43;
  margin-right: 5px;
}

.error-state {
  background-color: #fe6253 !important;
}
</style>